<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="css/login.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
    <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
    <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
    <script src="js/login.js"></script>
</head>
<body>
    <top>
        <div class="logo">
            <img src="img/logo.png" height="81" width="176"/>
        </div>
    </top>

    <main class="both">
        <div class="content">
            <div class="content_box">
                <img src="img/logn.png" height="24" width="68"/>
                <form class="cmxform" id="signupForm" method="get" action="">

                    <p>
                        <img src="img/1_03.png" height="40" width="40"/>
                        <input id="username" name="username" type="text" placeholder="会员名/邮箱/手机号"/>
                      </p>  <label for="username"></label>
                    <p>
                        <img src="img/2_06.png" height="40" width="40"/>
                        <input id="password" name="password"  type="password" placeholder="请输入登录密码"/>

                    </p> <label for="password"></label>

                <input class="bmit"  type="submit" value="登录">

                </form>
                <p class="register"><a href="register.html">立即注册</a></p>
            </div>
        </div>
    </main>
</body>
<script>
    var xhr = new XMLHttpRequest();
    var url = "https://5581d33a-fb20-4d3b-9260-f74758ec6380.mock.pstmn.io/hasName";
    var nameinput = document.getElementById("username");
    url += "?name"+nameinput.value;
    xhr.open("GET", url, true);
    xhr.send();
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4 && xhr.status == 200){
            var result = xhr.responseText;

            if(result == "yes"){
                nameinput.nextSibling.nextSibling.innerHTML = "用户名已存在";
            }else{
                nameinput.nextSibling.nextSibling.innerHTML = "ok";
            }
        }
    };
</script>
</html>